<template>
  <div>
    <el-row>
      <el-col :span="24" v-for="item in shop" :offset="item > 0 ? 3 : 0">
        <div>
          <el-card :body-style="{ padding: '0px' }">
            <div>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>商品详情</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="editShop(item.id)">编辑</el-button>
                </div>
                <span v-for="items in item.imgSrc" class="text item">
                  <span class="demo-image">
                    <el-image
                      style="width: 400px; height: 293px"
                      :src="items.imgSrc"></el-image>
                  </span>
                </span>
              </el-card>
            </div>
            <div style="padding: 14px;">
              <span>商品编号：{{ item.id }}</span>
              <div class="bottom clearfix">
                <div>商品名称：{{ item.name }}</div>
              </div>
              <div class="bottom clearfix">
                <div>发布日期：{{ item.issueDate }}</div>
              </div>
              <div class="bottom clearfix">
                <div>价格：{{ item.price }}元</div>
              </div>
              <div class="bottom clearfix">
                <div>参考重量：{{ item.weight }}kg</div>
              </div>
            </div>
          </el-card>
          <el-divider><i class="el-icon-loading"></i></el-divider>
        </div>
      </el-col>
    </el-row>
<!--    编辑商品信息的对话框-->
    <el-dialog
      title="修改商品信息"
      :visible.sync="edit"
      width="30%"
      :before-close="handleClose">
      <!--嵌套一个表单-->
      <el-form ref="form" :model="currShop" label-width="80px">
        <el-form-item label="商品id">
          <el-input v-model="currShop.id" disabled placeholder="请输入商品id"></el-input>
        </el-form-item>
        <el-form-item label="商品名">
          <el-input v-model="currShop.name" placeholder="请输入商品的名称"></el-input>
        </el-form-item>
        <el-form-item label="重量">
          <el-input v-model="currShop.weight" placeholder="请输入商品的重量"></el-input>
        </el-form-item>
        <el-form-item label="发布日期">
          <el-input v-model="currShop.issueDate" placeholder="请输入发布日期"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="currShop.price" placeholder="请输入商品的价格"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="edit = false" type="warning" plain>取 消</el-button>
    <el-button type="success" @click="editShopNow()" plain>确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      shop: [{
        id: 1,
        name: '茶杯',
        weight: 0.2,
        issueDate: '2020-03-02',
        price: 20,
        imgSrc: [{
          id: '',
          imgSrc: '',
        }]
      }],
      currShop:{
        id:'',
        name:'',
        weight:'',
        issueDate: '',
        price:'',
      },
      search: '',
      edit:false,
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //加载商品信息
    onLoadShop() {
      axios.get('http://localhost:8081/shop/selectShopAll')
        .then((res) => {
          this.shop = res.data.shop;
        })
    },
    editShop(id){ //点击修改按钮
      // console.log("当前商品id:"+id)
      for (let i in this.shop){
        if (this.shop[i].id==id){
          this.currShop.id=this.shop[i].id;
          this.currShop.name=this.shop[i].name;
          this.currShop.weight=this.shop[i].weight;
          this.currShop.issueDate=this.shop[i].issueDate;
          this.currShop.price=this.shop[i].price;
        }
      }
      this.edit=true;//打开对话框
    },
    editShopNow(){
      this.edit=false;  //关闭对话框
      axios.post('http://localhost:8081/shop/editShop',this.currShop)
        .then((res)=>{
          if(res.data.result){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.onLoadShop();//重新加载页面
          }
        })
    },
  },
  created() {
    this.onLoadShop();  //加载商品信息
  }
}
</script>

<style>

</style>
